<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>上班系统</title>

    <style>
        :root{
            --color: #a0a0a0;
        }


        h1{
            text-align: center;
        }

        #form1{
            text-align: center
        }

        /*居中*/
        /*margin: 0 auto;*!*/




    </style>

    <script>
        function work_button() {

            // offline 离线  online 在线
            var status = document.getElementById('button_work');

            // 修改div1标签中文本
            var status = document.getElementById('button_work');
            var div1 = document.getElementById("div1");

            if (status.value === "offline"){ // 离线状态
                // 修改div1标签中文本
                div1.innerText = "欢迎您来打黑工";
                alert("开始打工")
                status.value = "online";
                status.innerText = "下班";

                // 修改状态圆的文字
                var select = document.getElementById("select_name");

                var name_dict = {
                    "1":"张三",
                    "2":"李四",
                    "3":"王五",
                    "4":"文六",
                    "5":"甲乙",
                };



            }else if (status.value === "online"){ // 在线状态
                // 修改div1标签中文本
                div1.innerText = "辛苦了,黑工";
                alert("跑路了")
                status.value = "offline";
                status.innerText = "上班";

            }


            // 构建数据 发送到后端
            var data = {
                "name":name_dict[select.value],
                "state":status.value
            }

            // 向后端发起请求
            xhrRequest(data);



        }


        // 向后端发起请求
        function xhrRequest(data){
            // 假设你的Flask应用监听在http://127.0.0.1:5000，并且你有一个名为'/home'的路由

            fetch('http://127.0.0.1:5000/home', {
                method: 'POST', // 或者 'put'
                headers: {
                    'Content-Type': 'application/json', // 根据你的Flask视图函数，可能需要设置正确的Content-Type
                },
                body: JSON.stringify({
                    // 这里是你的参数
                    name: data['name'], // 名字
                    state: data['state'] // 状态
                }),
            })
                .then(response => response.json()) // 或者其他你期望的解析方式，比如 response.text()
                .then(data =>{
                    console.log(data) // 处理响应数据
                })
                .catch((error) => {
                    console.error('Error:', error);
                });


        }


    </script>



</head>
<body>
<h1>让我来看看是谁在上班</h1>

<form id="form1" action="/" method="post">
    <input type="text" name="user">

    <br>

    尊敬的：
    <select id="select_name">
        <option value="1" >张三</option>
        <option value="2" >李四</option>
        <option value="3" >王五</option>
        <option value="4" >文六</option>
        <option value="5" >甲乙</option>
    </select>

    打工人
    <br>
    <div id="div1">欢迎您来打黑工</div>

    <br>



    <br>



    <button type="button" id="button_work" value="offline" onclick="work_button()">上班</button>

</form>

</body>
</html>